<template>
    <div >
        <div class="app-container" v-if="role == 'default'">
            <!-- <h2>控制台</h2> -->
            <el-row :gutter="15">
                <el-col :md="canShowDataScreen ? 6 : 8" :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-content">
                            <span class="text-mini title-tip">欢迎您： </span>
                            <el-avatar shape="circle" style="vertical-align: middle; margin: 0 5px" size="small" :src="avatar"></el-avatar>{{ name }}
                        </div>
                    </el-card>
                </el-col>
                <el-col :md="canShowDataScreen ? 6 : 8" :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-content">
                            <span class="text-mini title-tip">美国时间</span>
                            {{ time | parseTime('y-m-d h:i:s 星期a') }}
                        </div>
                    </el-card>
                </el-col>
                <el-col :md="canShowDataScreen ? 6 : 8" :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-content">
                            <span class="text-mini title-tip">欧洲时间</span>
                            {{ eur_time | parseTime('y-m-d h:i:s 星期a') }}
                        </div>
                    </el-card>
                </el-col>
                <!-- <el-col :md="canShowDataScreen ? 6 : 8" :sm="24">
                <el-card shadow="hover" class="text-large chart-card">
                    <div class="chart-card-content">
                        <span class="text-mini title-tip">所属角色组</span>
                        {{ groups_name || '暂无' }}
                    </div>
                </el-card>
            </el-col> -->
                <el-col :md="canShowDataScreen ? 6 : 8" :sm="24" v-if="canShowDataScreen">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-content flex align-center" style="margin: -5px 0 -10px 0; min-height: 80px; flex-wrap: wrap">
                            <el-button type="primary" v-hasPermi="'order/OrderReportDataScreen/index'" style="margin-right: 16px" @click="showDataScreen">查看数据大屏</el-button>
                            <!-- <el-button type="primary" style="margin-left: 0;" @click="showExpertData">达人合作看板</el-button> -->
                            <!-- <el-button type="primary" style="margin-left: 0;" @click="showReportData">报表数据大屏</el-button> -->
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-row class="row-class" :gutter="15">
                <el-col :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-header text-mini" slot="header">今日面板销售额$</div>
                        <div class="chart-card-content">
                            <span class="content-title">{{ dataStatistics.DataStatisticsNew.total_price }} </span>
                        </div>
                        <div class="chart-card-footer">
                            <span>昨日面板销售额：${{ dataStatistics.DataStatisticsLast.total_price }}</span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-header text-mini" slot="header">今日订单量</div>
                        <div class="chart-card-content">
                            <span class="content-title">{{ dataStatistics.DataStatisticsNew.quantity }} </span>
                        </div>
                        <div class="chart-card-footer">
                            <span>昨日订单量：{{ dataStatistics.DataStatisticsLast.quantity }}</span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-header text-mini" slot="header">广告花费$</div>
                        <div class="chart-card-content">
                            <span class="content-title">{{ dataStatistics.DataStatisticsNew.advertising_spend }} </span>
                        </div>
                        <div class="chart-card-footer">
                            <span>昨日广告花费：${{ dataStatistics.DataStatisticsLast.advertising_spend }}</span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-header text-mini" slot="header">ROI</div>
                        <div class="chart-card-content">
                            <span class="content-title">{{ dataStatistics.DataStatisticsNew.roi }} </span>
                        </div>
                        <div class="chart-card-footer">
                            <span>昨日ROI：{{ dataStatistics.DataStatisticsLast.roi }}</span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-header text-mini" slot="header">预估毛利$</div>
                        <div class="chart-card-content">
                            <span class="content-title">{{ dataStatistics.DataStatisticsNew.profit }} </span>
                        </div>
                        <div class="chart-card-footer">
                            <span>昨日预估毛利：${{ dataStatistics.DataStatisticsLast.profit }}</span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-card shadow="always" body-style="padding:0 20px;" class="mt20">
                <div class="card-title">店铺销售统计</div>
                <StoreSalesRanking :chartData="storeSalesRanking" :height="350"></StoreSalesRanking>
            </el-card>
        </div>
        <div class="app-container" v-if="role == 'operator'">
            <!-- <h2>控制台</h2> -->
            <el-row :gutter="15">
                <el-col :md="6" :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-content">
                            <span class="text-mini title-tip">欢迎您： </span>
                            <el-avatar shape="circle" style="vertical-align: middle; margin: 0 5px" size="small" :src="avatar"></el-avatar>{{ name }}
                        </div>
                    </el-card>
                </el-col>
                <el-col :md="6" :sm="24">
                    <el-card shadow="hover" class="text-large chart-card" >
                        <div class="chart-card-content">
                            <span class="text-mini title-tip mb12">广告花费$</span>
                            <el-link class="content-title" style="color: #11a983" type="primary" @click="showReportCostDialog" :underline="false">{{ operate.spend_now }} </el-link>
                        </div>
                    </el-card>
                </el-col>
                <el-col :md="6" :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-content">
                            <span class="text-mini title-tip mb12">昨日广告花费$</span>
                            <span class="content-title">{{ operate.spend_yes }} </span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :md="6" :sm="24">
                    <el-card shadow="hover" class="text-large chart-card">
                        <div class="chart-card-content">
                            <span class="text-mini title-tip">美国时间</span>
                            {{ time | parseTime('y-m-d h:i:s 星期a') }}
                        </div>
                    </el-card>
                </el-col>
            </el-row>

            <el-tabs v-model="activeId" type="border-card" class="tab-index">
                <el-tab-pane label="运营今日投放计划" name="today">
                    <ReportVisitPage pageModal="components"></ReportVisitPage>
                </el-tab-pane>
                <el-tab-pane label="运营历史投放报告" name="history">
                    <ReportHistoryPage pageModal="components"></ReportHistoryPage>
                </el-tab-pane>
            </el-tabs>
            <ReportCostDialog v-if="reportCostDialog.visible" v-model="reportCostDialog.visible" :params="reportCostDialog.data"></ReportCostDialog>
        </div>
    </div>
</template>

<script>
import { queryOrderReportDataScreenStatistics, newStatistics, getRoleType } from '@/api/orderReportDataScreen'
import G2BarChart from '@/views/dashboard/G2BarChart'
import G2LineChart from '@/views/dashboard/G2LineChart'
import G2BreadChart from '@/views/dashboard/G2BreadChart'
import G2DountChart from '@/views/dashboard/G2DountChart'
import StoreSalesRanking from '@/views/dashboard/StoreSalesRanking'
import DataScreen from '@/views/dashboard/DataScreen'
import OrderNumWithTime from '@/views/dashboard/OrderNumWithTime'
import ReportVisitPage from '@/components/ReportVisitPage'
import ReportHistoryPage from '@/components/ReportHistoryPage'
import ReportCostDialog from '@/components/ReportCostDialog/index.vue'
import { mapGetters } from 'vuex'

export default {
    name: 'Index',
    components: { G2BarChart, G2LineChart, G2BreadChart, G2DountChart, StoreSalesRanking, OrderNumWithTime, DataScreen, ReportVisitPage, ReportHistoryPage, ReportCostDialog },
    data() {
        return {
            activeId: 'today',
            role: '',
            loading: false,
            test_data: [],
            chartText: { saleroom: '销售额', register: '注册量' },
            saleSearch: {
                type: 'saleroom',
                dateType: 0,
                datetime: '',
            },
            saleroomRankData: [],
            time: 0,
            eur_time: 0,
            storeSalesRanking: [],
            orderQuantity: [],
            dataStatistics: {
                DataStatisticsLast: {
                    advertising_spend: undefined,
                    quantity: undefined,
                    skuquantity: undefined,
                    total_price: undefined,
                },
                DataStatisticsNew: {
                    advertising_spend: undefined,
                    quantity: undefined,
                    skuquantity: undefined,
                    total_price: undefined,
                },
            },
            operate: {
                spend_now: 0,
                spend_yes: 0,
            },
            reportCostDialog: {
                visible: false,
                data: {},
            },
        }
    },
    computed: {
        ...mapGetters(['avatar', 'name', 'groups_name', 'permissions']),
        canShowDataScreen() {
            const values = ['order/OrderReportDataScreen/index', 'product/Inventory/getReportIndex']
            //后端有传空值的情况
            const filteredPermissions = Object.values(this.permissions).filter(permission => {
                return typeof permission === 'string' && permission.trim() !== ''
            })
            let hasPermissions = []
            values.forEach(value => {
                filteredPermissions.forEach(permission => {
                    if (value.includes(permission)) {
                        hasPermissions.push(true)
                    }
                })
            })
            return hasPermissions.length > 0
        },
    },
    created() {
        this.now()
        this.getData()
    },
    methods: {
        showReportCostDialog() {
            this.reportCostDialog.visible = true
        },
        showDataScreen() {
            const url = window.location.origin + '/data-screen'
            window.open(url)
        },
        showReportData() {
            const url = window.location.origin + '/report-data'
            window.open(url)
        },
        showExpertData() {
            const url = window.location.origin + '/reamaze';
            window.open(url, '_blank');
        },
        // 北京时间
        now() {
            this.time = new Date().getTime() - 15 * 3600 * 1000
            setInterval(() => {
                this.time = new Date().getTime() - 15 * 3600 * 1000
            }, 1000)
            this.eur_time = new Date().getTime() - 6 * 3600 * 1000
            setInterval(() => {
                this.eur_time = new Date().getTime() - 6 * 3600 * 1000
            }, 1000)
        },
       async getData() {
            this.loading = true
           try {
                const roleData = await getRoleType()
                this.role = roleData.data == '1' ? 'operator' : 'default'
                if (this.role == 'operator') {
                    const orderData = await newStatistics()
                    this.operate= {
                        spend_now: orderData.data?.spend_now,
                        spend_yes: orderData.data?.spend_yes,
                    }
                    this.reportCostDialog.data = {
                        platform_id: orderData.data?.platform_first_id?.toString() ?? '1',
                    }
                } else {
                    const orderData = await queryOrderReportDataScreenStatistics()
                    this.orderQuantity = orderData.data?.OrderQuantity ?? []
                    this.storeSalesRanking =
                    orderData.data?.StoreSalesRanking.map(item => {
                        item.total_price = parseFloat(item.total_price)
                        return { ...item }
                    }) ?? []
                    this.dataStatistics = orderData.data.DataStatistics
                }
           } catch (error) {
                this.loading = false
                console.log(error)
                this.$message.error('数据请求失败，请稍后再试')
           }

        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep .tab-index {
    .layout-route {
        padding: 0;
        > .card {
            padding: 0;
        }
    }
}
.row-class {
    display: flex;
    @media (max-width: 768px) {
        flex-wrap: wrap;
    }
}
.card-title {
    padding: 16px 0;
    font-size: 16px;
    font-weight: bold;
}
.card-title:before {
    content: '';
    display: inline-block;
    position: relative;
    top: 2px;
    margin-right: 10px;
    background: rgba(48, 153, 166, 1);
    width: 2px;
    height: 14px;
    border: 2px solid rgba(108, 206, 230, 1);
}
.app-container {
    background: #f0f2f5;
    .title-tip {
        color: #909399;
        margin: 0;
        display: block;
    }
    /* 统计卡片 */
    .chart-card {
        color: #606266;
        margin-bottom: 15px;
    }
    .chart-card-num {
        font-size: 30px;
    }

    .chart-card-content {
        height: 50px;
        margin-bottom: 15px;
        .content-title {
            font-weight: bold;
            font-size: 20px;
            color: #303133;
        }
    }
    .chart-card-footer {
        border-top: 1px solid #eee;
        font-size: 13px;
        padding-top: 12px;
        padding-left: 20px;
        margin-left: -20px;
        margin-right: -20px;
    }

    .chart-card-text {
        font-size: 13px;
    }
}
</style>
